<template>
  <a-card class="dynamic-config" :body-style="{ padding: '10px' }">
    <div class="flex flex-col gap-2">
      <div>{{ t["小数"] }}</div>
      <div class="w-full flex justify-between">
        <div class="text-[12px] title text-nowrap text-gray-500">{{ t["对齐"] }}</div>

        <div>
          <a-radio-group v-model="currentShape.decimal.align" type="button" size="mini">
            <a-radio value="superscript">{{ t["上标"] }}</a-radio>
            <a-radio value="normal">{{ t["正常"] }}</a-radio>
            <a-radio value="subscript">{{ t["下标"] }}</a-radio>
          </a-radio-group>
        </div>
      </div>

      <div class="common">
        <div class="text-[12px] title text-nowrap text-gray-500">
          {{ t["字体大小"] }}
        </div>
        <a-input-number
          v-model="currentShape.decimal.fontSize"
          style="width: 100px"
          :min="12"
        ></a-input-number>
      </div>

      <div class="w-full flex items-center">
        <div class="flex-1 flex">
          <div class="text-[12px] title text-nowrap text-gray-500">{{ t["显示小数点"] }}</div>
          <a-switch v-model="currentShape.decimal.includeDecimal"></a-switch>
        </div>
        <div class="flex gap-2 items-center">
          <span> {{ t["小数位数"] }} </span>
          <a-select
            size="mini"
            style="width: 100px"
            v-model="currentShape.decimal.digits"
            :options="digitsOptions"
          ></a-select>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { getFormatOptions, getPrefixOptions } from "@/api/selector/dict";
import { currentShape } from "@/views/paint/modules/data/shapes";

const t = translate("公共模块");

onMounted(() => {
  getFormatOptions();
  getPrefixOptions();
});

const digitsOptions = Array.from({ length: 5 }).map((v, i) => {
  return {
    label: `${i + 1}`,
    value: i + 1
  };
});
</script>

<style lang="scss" scoped>
.dynamic-config {
  white-space: nowrap;

  .title {
    width: 80px;
  }
  .common {
    @apply w-full flex items-center  gap-2;
  }
}
</style>
